<template>
  <process-designer :key="designerOpen" style="border: 1px solid rgba(0, 0, 0, 0.1)" ref="modelDesigner"
    v-loading="designerData.loading" :height="height" :bpmnXml="designerData.bpmnXml" :designerForm="designerData.form"
    @save="save" />
</template>

<script>
import {
  categoryList,
  delDeployment,
  listDefinition,
  readXml,
  roleList,
  saveXml,
  updateState,
  userList
} from "@/views/flowable/api/definition";
import ProcessDesigner from "@/components/ProcessDesigner";
export default {
  components: {
    ProcessDesigner,
  },
  props: {
    height: {
      type: Number,
      default: document.documentElement.clientHeight
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      designerOpen: false, //bpmn-process-designer使用
      designerData: {
        loading: false,
        bpmnXml: "",
        deploymentId: null,
        form: {
          users: [],
          groups: [],
          categorys: [],
          processName: null,
          processKey: null,
        },
      },
    };
  },
  created() {
    this.initUserAndRole();
    this.getDetail(this.data.deploymentId)
  },
  methods: {
    initUserAndRole() {
      userList({}).then(res => {
        this.designerData.form.users = res.result || []
        this.designerData.form.users.map(o => {
          o.id = o.username
          o.name = o.realname
        })
      })
      roleList({}).then(res => {
        this.designerData.form.groups = res.result || []
        this.designerData.form.groups.map(o => {
          o.name = o.roleName
        })
      })
      categoryList({}).then(res => {
        this.designerData.form.categorys = res.result || []
      })
    },
    getDetail(deploymentId) {
      if (!deploymentId) return
      readXml(deploymentId).then(res => {
        if (res.code == 0 || res.code == 200) {
          this.designerData.bpmnXml = res.result;
        }
        else {
          this.$message.error(res.message)
        }
      })
    },
    /*保存流程定义*/
    save(data) {
      console.log(data); // { process: {...}, xml: '...', svg: '...' }
      const params = {
        name: data.process.name,
        category: data.process.category,
        xml: data.xml,
      };
      console.log(params);
      if (data.process.category == null) {
        this.$message.success("请选择流程分类");
        return "";
      }
      saveXml(params).then((res) => {
        console.log(res);
        if (res.success) {
          this.$message.success(res.message);
          // 关闭当前标签页并返回上个页面
          // this.getList();
          this.designerOpen = false;
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
};
</script>
